<template>
  <div style="overflow-x:hidden;">
    <div class="screen">
      <div class="home">
        <blog-info></blog-info>
        <div class="blog-right">
          <div v-if="loading">
            <new-loading v-for="item of 6" :key="item"></new-loading>
          </div>
          <blog-list v-else :list="list"></blog-list>
        </div>
        <index-footer style="margin-left: 21.7%;margin-bottom: 0" class="index-foot"></index-footer>
      </div>
    </div>
  </div>
</template>
<script>
import BlogInfo from './../components/BlogInfo';
import BlogList from './../components/BlogList';
import IndexFooter from './/IndexFooter';
import NewLoading from './../../../components/NewLoading.vue'

export default {
  name: 'NewHome',
  components: {
    BlogInfo,
    BlogList,
    IndexFooter,
    NewLoading,
  },
  data() {
    return {
      current_page: 1,//当前页
      last_page: 1,//最后一页
      list: [],//文章数据
      loading: true,
    }
  },
  methods: {
    async getarticle() {
      return new Promise(resolve => {
        this.$http.get("/article/getarticleall").then(async data => {
          data.data.filter((item, i) => {
            item.bestcount = null
            item.isbest = null
          })
          resolve(data.data)
        })
      })
    },
    getimg(id) {
      return new Promise(resolve => {
        this.$http({
          url: "/file/img/" + id,
          method: "get",
          responseType: "arraybuffer",
        }).then(res => {
          let bytes = new Uint8Array(res);
          let storeData = "";
          let len = bytes.byteLength;
          for (let i = 0; i < len; i++) {
            storeData += String.fromCharCode(bytes[i]);
          }
          let database = "data:image/png;base64," + window.btoa(storeData);
          resolve(database);
        });
      })
    },
    // 标签点击查询跳转
    change(item) {
      this.current_page = 1
      this.$router.push({
        path: '/blogshow',
        query: {
          label: item,
        }
      })
    },
  },
  created() {
    this.getarticle().then(async data => {
      await data.filter(async (item, i) => {
        item.imgpathid = item.imgpathid.toString()
      })
      this.list = data
      this.loading = false
    })
  },
}
</script>
<style lang="stylus" scoped>
.home-blog >>>
.nav-top
  color #515151 !important

.nav-no-quiet
  // backdrop-filter: blur(6px);
  box-shadow: 0px 10px 20px 4px rgba(195, 199, 199, 0.4);
  background-color: rgba(255, 255, 255, 0.85)
  color: #515151

.home >>>
.el-pagination.is-background .el-pager li:not(.disabled).active
  background-color var(--main-4)

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li
  border-radius 20px
  font-weight: 900;
  background-color #fff

  &:hover
    color var(--main-6)

.home
  margin-top: 60px
  overflow-x: hidden
  background-color #f8f8f8

  .blog-right
    margin-left 21%
    margin-top 30px

    .index-foot
      margin 0 10px

@media (max-width: 992px)
  .blog-right
    margin-left 0 !important

  .index-foot
    margin 0 !important
</style>